<template>
  <div class="app-container calendar-list-container">
    <div class="data-list">
      <el-row class="list-content">
        <el-col><span>{{$t('demandQuotation.demandBasciInfo')}}</span></el-col> <!--商机基本讯息-->
      </el-row>
      <div style="padding: 20px">
        <el-row>
          <el-col :span="4" style="padding:0.8%">
            <div class="labelName">BD NO. ：</div>
            <div class="labelName">{{ Info.bdValue }}</div>
          </el-col>
          <el-col :span="4" style="padding:0.8%">
            <div class="labelName">BD Name：</div>
            <div class="labelName">{{ Info.bdName }}</div>
          </el-col>
          <el-col :span="4" style="padding:0.8%">
            <div class="labelName">Account：</div>
            <div class="labelName">{{ Info.bu }}</div>
          </el-col>
          <el-col :span="4" style="padding:0.8%">
            <div class="labelName">Client：</div>
            <div class="labelName">{{ Info.clientName }}</div>
          </el-col>
          <el-col :span="4" style="padding:0.8%">
            <div class="labelName">End Date：</div>
            <div class="labelName">{{ Info.endDate }}</div>
          </el-col>
          <el-col :span="4" style="padding:0.8%">
            <div class="labelName">Territory：</div>
            <div class="labelName">{{ Info.territoryValue ? Info.territoryValue : Info.territory }}</div>
          </el-col>
          <el-col :span="4" style="padding:0.8%">
            <div class="labelName">Sales：</div>
            <div class="labelName">{{ Info.sales }}</div>
          </el-col>
          <el-col :span="4" style="padding:0.8%">
            <div class="labelName">Presales：</div>
            <div class="labelName">{{ Info.presales }}</div>
          </el-col>
          <el-col :span="4" style="padding:0.8%">
            <div class="labelName">Estimated Budget：</div>
            <div class="labelName"  v-format="'#,##0'">{{ Info.estimatedBudget }}</div>
          </el-col>
          <el-col :span="4" style="padding:0.8%">
            <div class="labelName">Estimated cost：</div>
            <div class="labelName"  v-format="'#,##0'">{{ Info.estimatedCost }}</div>
          </el-col>
          <el-col :span="4" style="padding:0.8%">
            <div class="labelName">Decision maker：</div>
            <div class="labelName">{{ Info.decisionMaker }}</div>
          </el-col>
          <el-col :span="4" style="padding:0.8%">
            <div class="labelName">Status：</div>
            <div class="labelName">{{ Info.status }}</div>
          </el-col>
        </el-row>
      </div>
    </div>

    <div class="data-list">
      <el-row class="list-content"><!--报价单单号：-->
        <el-col :span="5"
        ><span>{{$t('demandQuotation.priceOrder')}}：{{ Info.quotation }}</span></el-col
        >
      </el-row>
      <div class="list-operation">
        <!--新增-->
        <el-button
          class="yt-btn-ys"
          type="primary"
          @click="handleDownload(1, true)"
        >{{$t('demandQuotation.templeteDownload')}}
        </el-button><!--报价单模板下载-->
        <!--删除-->
        <el-button
          class="yt-btn"
          type="danger"
          style="margin-left:10px"
          @click="handleAdd"
        >{{$t('demandQuotation.addPrice')}}
        </el-button><!--新增报价-->
      </div>
      <el-table
        :data="list"
        style="width: 100%;"
        border
        class="yt-table"
        v-loading.body="listLoading"
        :key="tableKey"
        max-height="300"
      >
        <el-table-column
          align="center"
          :label="$t('demandQuotation.createTime')"
          prop="createTime"
          class-name="pd"
        /><!--报价单上传时间-->
        <el-table-column
          align="center"
          :label="$t('demandQuotation.createName')"
          prop="createName"
          class-name="pd"
        /><!--报价单上传人-->
        <el-table-column align="center" :label="$t('demandQuotation.xlsxDownload')"><!--报价单下载（xslx）-->
          <template slot-scope="scope">
            <div
              v-if="scope.row.fileType === 0"
              style="text-decoration: underline;color: #0000ff;cursor: pointer;"
              type="primary"
              @click="handleDownload(scope.row.id)"
            >
              {{ scope.row.fileName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('demandQuotation.pdfDownload')"><!--报价单下载（PDF）-->
          <template slot-scope="scope">
            <div
              v-if="scope.row.fileType !== 0"
              style="text-decoration: underline;color: #0000ff;cursor: pointer;"
              type="primary"
              @click="handleDownload(scope.row.id)"
            >
              {{ scope.row.fileName }}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="data-list" v-if="addQuotationDialog">
      <el-row class="list-content">
        <el-col><span>{{$t('demandQuotation.addPrice')}}</span></el-col><!--新增报价-->
      </el-row>
      <el-row style="margin-top: 20px">
        <el-col :offset="8" :span="5">
          <el-upload
            class="upload-demo"
            ref="upload"
            drag
            :action="urlUpload"
            :file-list="fileList"
            :auto-upload="false"
            multiple
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text"><!--点击或将文件拖拽到这里上传-->
              {{$t('demandQuotation.upload')}}
              <div class="el-upload__tip" slot="tip"><!--支持扩展名：.xlsx .xls .pdf ...-->
                {{$t('demandQuotation.uploadTips')}}：.xlsx .xls .pdf ...
              </div>
            </div>
          </el-upload>
        </el-col>
      </el-row>
    </div>
    <el-row
      style="margin-top: 20px;padding-left:40px;"
      v-if="addQuotationDialog"
    >
      <el-col :offset="9">
        <el-button class="yt-btn-ys" type="primary" @click="submitUpload"
        >{{$t('button.submit')}}
        </el-button><!--提交-->
        <el-button class="yt-btn" type="primary" @click="cancel"
        >{{$t('button.cancel')}}
        </el-button><!--取消-->
      </el-col>
    </el-row>
  </div>
</template>

<script>
  // 商机维护单个对象接口
  // eslint-disable-next-line no-unused-vars
  import { demandId } from '@/api/specialApplication/index';
  // 需求报价单维护
  import offerDemandReq from '@/api/offerDemand';
  import myOffeReq from '@/api/myOffe';
  import customerReq from '@/api/customer';

  export default {
    name: 'demandQuotation',

    data() {
      return {
        tableKey: 0,
        listLoading: true,
        addQuotationDialog: false,
        id: '',
        demandId: '',
        title: '',
        Info: {},
        list: [],
        fileList: [],
        urlUpload: '',
        listMapAll: this.$store.getters.allMapDic,
        routeQuery: {}
      };
    },
    methods: {
      // 上传成功
      handleAvatarSuccess() {
        this.cancel();
        this.fileList = [];
        this.getList();
      },
      // 上传成功之前限制格式或大小
      beforeAvatarUpload(file) {
        const isType =
          file.type ===
          'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
          file.type === 'application/vnd.ms-excel' ||
          file.type === 'application/pdf';
        const isLt2M = file.size / 1024 / 1024 < 10;
        if (!isType) {
          this.$message.error(this.$t('demandQuotation.supportFileType')); // 上传文件支持excel及PDF格式文件!
        }
        if (!isLt2M) {
          this.$message.error(this.$t('demandQuotation.supportFileSize')); // 上传文件大小不能超过10MB!
        }
        return isType && isLt2M;
      },
      // 报价单模板下载
      // 报价单下载
      handleDownload(filePath, isType) {
        const a = document.createElement('a');
        let href = '';
        if (isType) {
          href = '/api/admin/excel/downloadTemplate?filePath=' + filePath;
        } else {
          const type = '1';
          href =
            '/api/admin/excel/downloadTemplate?filePath=' +
            filePath +
            '&type=' +
            type;
        }
        console.log('href', href);
        a.download = Date.now();
        a.href = href;
        a.click();
      },
      // 新增报价
      handleAdd() {
        this.addQuotationDialog = true;
      },
      // 取消
      cancel() {
        this.addQuotationDialog = false;
      },
      submitUpload() {
        this.$refs.upload.submit();
      },
      getDemand() {
        // 获取页面上半部分
        const maintenanceDetail = window.sessionStorage.getItem(
          'maintenanceDetail'
        );
        this.Info = JSON.parse(maintenanceDetail);
        if (this.Info.bdValue) {
          this.Info.quotation = this.Info.bdValue.replace('B', 'Q')
        }
      },
      getList() {
        // 获取页面下半部分
        this.Info.demandId = this.demandId
        offerDemandReq.page(this.Info).then(response => {
          this.list = response.data.rows;
          this.listLoading = false;
        });
      },
      getData() {
        myOffeReq.getOfferAndDemand(this.id).then(response => {
          console.log('page_response2', response);
          customerReq.getObj(response.data.demand.client).then(res => {
            response.data.demand.clientName = res.data.customerName;
            this.Info = response.data.demand;
            this.list = response.data.offerDemands;
            this.Info.territoryValue = this.listMapAll.territory[this.Info.territory];
            if (this.Info.bdValue) {
              this.Info.quotation = this.Info.bdValue.replace('B', 'Q')
            }
          });
          this.demandId = response.data.demand.id;
          const type = '1';
          this.urlUpload =
            '/api/admin/excel/uploadDemand/' +
            this.$store.getters.info.id +
            '/' +
            this.demandId +
            '/' +
            type;
          this.listLoading = false;
        });
      }
    },
    created() {
      // 获取id
      if (this.$route.query.id === undefined) {
        const demandQuotationQuery = window.sessionStorage.getItem(
          'demandQuotationQuery'
        );
        this.routeQuery = JSON.parse(demandQuotationQuery);
      } else {
        this.routeQuery = this.$route.query;
      }
      this.title = this.routeQuery.title;
      this.listLoading = true;
      if (this.title === 'update') {
        // 从上商机维护页面进来
        this.demandId = this.routeQuery.id;
        this.id = this.routeQuery.id;
        const type = '1';
        this.urlUpload =
          '/api/admin/excel/uploadDemand/' +
          this.$store.getters.info.id +
          '/' +
          this.demandId +
          '/' +
          type;
        this.getDemand();
        this.getList();
        return;
      }
      if (this.title === 'myQuotes') {
        // 从我的报价进来
        this.id = this.routeQuery.id;
        this.getData();
        return;
      }
    },
    beforeDestroy() {
      window.sessionStorage.setItem(
        'demandQuotationQuery',
        JSON.stringify(this.routeQuery)
      );
    }
  };
</script>
<style scoped>
</style>
